<template>
    <slot name="default">调节字号：</slot>
    <button 
        @click="decreaseFontSize"
        :disabled="fontSize == minFontSize">
        <slot name="decrease">减小字号</slot>
    </button>
    <button
        @click="resetFontSize"
        :disabled="fontSize == defaultFontSize">
        <slot name="reset">重置字号</slot>
    </button>
    <button @click="increaseFontSize"
        :disabled="fontSize == maxFontSize"
        :title="fontSize == maxFontSize ? '已经是最大字号' : '增大表格中文字字号'"
        >
        <slot name="increase">增大字号</slot>
    </button>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    minFontSize: {
        type: Number,
        default: 8
    },
    maxFontSize: {
        type: Number,
        default: 20
    },
    defaultFontSize: {
        type: Number,
        default: 14
    }
})

const fontSize = ref(props.defaultFontSize);

const emit = defineEmits(['changed'])

function increaseFontSize() {
    fontSize.value = fontSize.value + 2;
    emit('changed', fontSize.value);
}
function decreaseFontSize() {
    fontSize.value -=2;
    emit('changed', fontSize.value);
}
function resetFontSize() {
    fontSize.value = props.defaultFontSize;
    emit('changed', fontSize.value);
}
</script>